<template>
  <div class="flex flex-col gap-y-1">
    <CopyField
      v-if="record.provider === 1"
      :content="`APP ID：${record.provider_config.app_id}`"
      class="shrink-0"></CopyField>
    <div v-if="!open" class="flex gap-x-2 items-center">
      <span>{{ record.provider === 1 ? '密钥' : 'API TOKEN' }}：******</span>
      <i-icons-eye-close
        v-if="!open"
        class="flex-shrink-0"
        @click="open = !open" />
    </div>
    <div v-else class="flex gap-x-2 items-center">
      <a-tooltip v-if="open" :content="content">
        <span class="truncate">
          {{ props.record.provider === 1 ? '密钥：' : 'API TOKEN：' }}
          {{ content }}
        </span>
      </a-tooltip>
      <i-icons-view-info class="flex-shrink-0" @click="open = !open" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { DnsItem } from '@/apis/model/resolve'

const props = defineProps<{ record: DnsItem }>()
const open = ref(false)
const content = computed(() =>
  props.record.provider === 1
    ? `${props.record.provider_config.app_key}`
    : `${props.record.provider_config.api_token}`
)
</script>
<style lang="less" scoped></style>
